<template>
	<uv-upload
		name="1" :multiple="multiple" :deletable="!disabled"
		:fileList="fileList" :maxCount="maxCount" :disabled="disabled"
		@afterRead="afterRead" @delete="deletePic" :width="width" :height="height"
	>
		<template v-if="type === 1">
			<view class="lst-upimg1">
				<uv-icon name="camera" size="40" color="#979998" />
				<uv-text :text="text" class="uv-text-init" color="#989898" size="12" />
			</view>
		</template>
		<template v-if="type === 2">
			<view class="lst-upimg2">
				<uv-icon name="camera" size="20" color="#979998" />
				<uv-text :text="text" class="uv-text-init" color="#989898" size="12" />
			</view>
		</template>
		<template v-if="type === 3">
			<view class="lst-upimg3">
				<uv-icon name="camera" size="26" color="#979998" />
			</view>
		</template>
		<template v-if="type === 4">
			<slot></slot>
		</template>
	</uv-upload>
</template>
<script setup>
	import { ref, toRef, watch } from 'vue';
	import { uploadImage } from '@/api'
	import { onLoad } from '@dcloudio/uni-app'
	
	const emit = defineEmits(['success'])
	
	const props = defineProps({
		name: { type: String, default: '' },
		text: { type: String, default: '上传照片' },
		type: { type: Number, default: 1 },
		multiple: { type: Boolean, default: false },
		maxCount: { type: Number, default: 1 },
		width: { type: [Number, String], default: 80 },
		height: { type: [Number, String], default: 80 },
		list: { type: [Array, String], default: [] },
		disabled: { type: Boolean, default: false }
	})
	
	const init = ref(false)
	const fileList = ref([])
	
	const afterRead = async (event) => {
		let lists = [].concat(event.file)
		lists.map((item) => {
			fileList.value.push({
				...item,
				message: '上传中',
				status: 'uploading',
			})
		})
		await upImg()
		emit('success', fileList.value)
	}
	
	const upImg = async () => {
		return new Promise(async (resolve, reject) => {
			for (let i = 0; i < fileList.value.length; i++) {
				if (fileList.value[i].status === 'uploading') {
					const { data } = await uploadImage({
						name: 'file',
						filePath: fileList.value[i].thumb,
					})
					fileList.value[i].src = data
					fileList.value[i].status = 'success'
					fileList.value[i].message = '上传成功'
				}
			}
			resolve()
		})
	}
	
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1)
		emit('success', fileList.value)
	}
	
	onLoad(() => {
		
	})
	watch(props, (newVal) => {
		if(init.value) return
		if(typeof props.list === 'string' && props.list) {
			fileList.value = [{ url: props.list, status: 'success' }]
			init.value = true
		}
		if(typeof props.list === 'object' && props.list.length > 0) {
			fileList.value = props.list.map(e => ({ url: e, status: 'success' }))
			init.value = true
		}
	},{ immediate: true, deep: true })
</script>
<style lang="scss" scoped>
	.lst-upimg1 {
		width: 180rpx;
		height: 180rpx;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
		flex-direction: column;
		justify-content: center;
		background-color: #F7F5F8;
	}
	.lst-upimg2 {
		display: flex;
		align-items: center;
	}
	.lst-upimg3 {
		width: 80rpx;
		height: 80rpx;
		align-items: center;
		border-radius: 10rpx;
		justify-content: center;
		border: 1px dashed #979998;
	}
</style>
